<template>
  <div
    v-if="currentConversation.conversationID&&currentConversation.type!=='@TIM#SYSTEM'"
    style="width: 100%;position: relative;"
    :class="{'flex m-msg-send ' : isDesMobile}"
    class="wrappperTextarea"
  >
    <!--视频按钮-->
    <div style="position: absolute;top:10px;left:10px;display: flex; align-items: center;">
      <!-- <videoCallButton :online="1" mode="icon" :user-id="fromAccount" /> -->
      <!-- :action="action"
        :headers="myHeaders" -->
      <!-- 发送图片 -->
      <el-upload
        class="avatar-uploader"
        :show-file-list="false"
        :action="action"
        :headers="myHeaders"
        :on-success="handleAvatarSuccess"
      >
        <i class="el-icon-picture-outline" style="font-size:18px;" />
      </el-upload>
      <p>
        <el-popover
          placement="top-start"
          width="300"
          trigger="hover"
        >
          <span v-for="(item, index) in emojiMap" :key="index">
            <img style="width:20px;height:20px;margin: 2px;cursor: pointer;" :src="emojiUrl + item" :title="index" @click="chooseFase(item,index)"></span>
          <img slot="reference" style="margin-left:20px;cursor: pointer; width:20px;height:auto;" src="./emoji.png" alt="">
        </el-popover></p>
    </div>
    <div style="padding-top: 30px;">
      <div v-if="(faceImg || imageUrl)" contenteditable="true" @keyup.delete="keyDowndelete()">
        <img v-if="faceImg" style="width:20px;height:20px;margin: 10px;cursor: pointer;" :src="(emojiUrl + faceImg)" alt="">
        <el-scrollbar
          v-else-if="imageUrl"
          ref="myScrollbar"
          class="myScrollbar"
          style="overflow-x:hidden;height: 120px;"
        >
          <img id="upload-img" :src="imageUrl">
        </el-scrollbar>
      </div>
      <el-input
        v-if="( !faceImg && !imageUrl)"
        v-model="textarea"
        type="textarea"
        :rows="3"
        :maxlength="120"
        placeholder="一起聊聊"
        style="color:#000;width: 100%;border: none;"
        @keydown.native="keyDownSend($event)"
      />
      <div
        v-if="currentConversation.conversationID"
        class="padding-top-10 padding-20 flex-end send-btn-row"
        :class="{'padding-no margin-left-10 m-send-btn' : isDesMobile}"
      >
        <el-tooltip class="item" effect="dark" content="发消息" placement="top-start">
          <el-button type="primary" :loading="buttonLoading" @click="sendMessage()">发送</el-button>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>
<script>
import { emojiUrl, emojiMap, emojiName } from './emojiMap'
import { createProp } from '@/tim';
import messageStoreMixin from '@/store/message/messageStoreMixin';
import myalert from '@/tim/myalert';
import findComponentUpward from '@/tim/vueFindComponent/findComponentUpward';
import { getNickName } from '@/tim';
import { mapGetters } from 'vuex';
import ajax from '@/tim/ajax';
import { uploadUrl, token } from '@/utils/request'
import { getProjectId } from '@/tim';

export default {
  mixins: [
    messageStoreMixin
  ],
  data () {
    return {
      textarea: '',
      imageUrl: '',
      faceImg: '',
      faceText: '',
      file: '',
      emojiUrl,
      emojiMap,
      emojiName,
      buttonLoading: false,
      action: uploadUrl,
      myHeaders: {
        'Authorization-admin': token
      },
    }
  },
  computed: {
    ...mapGetters('mobile', [
      'isDesMobile'
    ]),
    fromAccount () {
      var currentConversation = this.currentConversation
      var fromAccount = currentConversation.userProfile && currentConversation.userProfile.userID
      return fromAccount
    },
  },
  props: {},
  mounted () {
    // this.$nextTick(() => {
    //     $('textarea').css({border: 'none'})
    // })
  },
  components: {
    messageBox: () => import('./messageBox')
  },
  methods: {
    chooseFase (item, index) {
      console.log(item, index)
      this.faceImg = item
      this.faceText = index
    },
    // 图片上传回调
    async handleAvatarSuccess (res, file) {
      console.log(res, file)
      this.imageUrl = URL.createObjectURL(file.raw);
      this.file = file.raw
      console.log(this.file)
      this.$forceUpdate()
    },
    keyDownSend (event) {
      console.log(event)
      if (event.shiftKey && event.keyCode == 13) {
        event.cancelBubble = true;
        event.preventDefault();
        event.stopPropagation();
        this.sendMessage();
      }
    },
    keyDowndelete () {
      this.faceImg = ''
      this.imageUrl = ''
      this.faceText = ''
    },
    chooseImg () {

    },
    async sendMessage () {
      if (this.imageUrl) {
        const user = this.currentUser
        const nickName = getNickName()
        const currentConversation = this.currentConversation
        const fromAccount = currentConversation.userProfile && currentConversation.userProfile.userID
        this.buttonLoading = true
        const message = await window.tim.createImageMessage({
          to: fromAccount,
          conversationType: window.TIM.TYPES.CONV_C2C,
          payload: {
            file: this.file,
          }
        })
        this.pushCurrentMessageList(message)
        ajax.get(`/backend/v1/statistics/addInstantMessageNum?type=chat`)// 统计
        await window.tim.sendMessage(message)
        this.buttonLoading = false
        // 最下面
        const page = findComponentUpward(this, 'RightMesage')

        page.scrollToBottom()
        this.imageUrl = ''
      } else if (this.faceText) {
        const user = this.currentUser
        const nickName = getNickName()
        const currentConversation = this.currentConversation
        const fromAccount = currentConversation.userProfile && currentConversation.userProfile.userID
        this.buttonLoading = true
        const message = await window.tim.createFaceMessage({
          to: fromAccount,
          conversationType: window.TIM.TYPES.CONV_C2C,
          payload: {
            index: 1, // Number 表情索引，用户自定义
            data: this.faceText // String 额外数据对应表情对应的文字 例:[龇牙]
          }
        })
        this.pushCurrentMessageList(message)
        ajax.get(`/backend/v1/statistics/addInstantMessageNum?type=chat`)// 统计
        await window.tim.sendMessage(message)
        this.buttonLoading = false
        // 最下面
        const page = findComponentUpward(this, 'RightMesage')
        page.scrollToBottom()
        this.faceText = ''
        this.faceImg = ''
      } else {
        if (!this.textarea) {
          myalert.fail('信息不能为空')
          return false
        }
        if (this.textarea.length > 120) {
          myalert.fail('消息长度不能超过120个字')
          return false
        }
        const user = this.currentUser
        const nickName = getNickName()
        const currentConversation = this.currentConversation
        const fromAccount = currentConversation.userProfile && currentConversation.userProfile.userID
        this.buttonLoading = true
        const message = await window.tim.createTextMessage({
          to: fromAccount,
          conversationType: window.TIM.TYPES.CONV_C2C,
          payload: {
            text: `${nickName}··${this.textarea}`
          }
        })
        this.pushCurrentMessageList(message)
        ajax.get(`/backend/v1/statistics/addInstantMessageNum?type=chat`)// 统计
        await window.tim.sendMessage(message)
        this.buttonLoading = false
        // 最下面
        const rightMesage = findComponentUpward(this, 'rightMesage')
        const page = findComponentUpward(this, 'RightMesage')
        console.log("page-->",page)
        try{
          page.scrollToBottom()
        }catch(err){
          console.log(err)
        }

        this.textarea = ''
      }
    }
  }

}
</script>
<style lang="scss" scoped>
#upload-img {
  width: 100px;
  height: auto;
}
  .wrappperTextarea  textarea {
    border: none !important;
    resize: none;
  }

  .m-msg-send {
    height: 35px;
    width: 100%;
    position: fixed;
    width: 90% !important;
    left: 5%;
    bottom: 0px;
    background: #fff;
    margin-top: 0 !important;
    padding-bottom: 10px;
    z-index: 10;

    .el-textarea {
      height: 35px;

       .el-textarea__inner {
        height: 35px;
      }
    }

    .m-send-btn {
      height: 35px;

       .el-button--small,
       .el-button--small.is-round {
        height: 35px;
        padding: 9px 15px !important;
      }
    }
  }
  textarea::-webkit-input-placeholder {
    color: #000;
  }
  textarea::-moz-placeholder {
    color: #000;
  }
  textarea:-moz-placeholder {
    color: #000;
  }
  textarea::-ms-input-placeholder {
    color: #000;
  }
  .el-input__inner {
    &::placeholder {
        color: #000 !important;
    }

    &::-webkit-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #000 !important;
    }

    &:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 适配火狐 */
        color: #000 !important;
    }

    &::-moz-placeholder {
        /* Mozilla Firefox 19+ 适配火狐 */
        color: #000 !important;
    }

    &:-ms-input-placeholder {
        /* Internet Explorer 10+  适配ie*/
        color: #000 !important;
    }
}
</style>
<style>
  .el-textarea.el-input--small {
  }

  /*.el-textarea.el-input--small .el-textarea__inner {
          border: none;

      }*/
  .send-btn-row {
    position: relative;
  }

  .send-btn-row .el-button {
    position: absolute;
    bottom: 30px;
    right: 10px;
  }
</style>
